<!-- 线下订单 -->
<template>
	<!-- #ifdef MP-WEIXIN -->
	<view class="container order__page" :style="{top:fixedTop + 'px'}">
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<view class="container order__page">
			<!-- #endif -->
			<view>
				<empty v-if="orderLists.length === 0" :custom="true" src="../../static/images/no-orders.png" text="您还没有订单记录哦"></empty>

				<!-- <view class="conditions"> -->
				<!-- :height="88" :padding="0" :sliderWidth="150" :sliderHeight="60" bottom="50%" -->
				<!-- color="#888" selectedColor="black" :bold="true" sliderBgColor="#E5FAFF" :orderPage="true" -->
				<!-- <uui-tab class="condit__tab" :tabs="navbar" :currentTab="currentTab>1?0:currentTab" @change="tabChange" itemWidth="50%"
			 color="#333333" selectedColor="#57BE6A" sliderBgColor="#57BE6A"></uui-tab>
		</view> -->
				<view class="listBox">
					<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="lower">
						<!-- 搜索 -->
						<view class="uni-searchbox">
							<view class="uni-search-input">
								<icon type="search" :size='13' color='#333'></icon>
								<input confirm-type="search" placeholder="请输入商户名称" placeholder-class="uni-input-plholder" class="uni-input"
								 v-model.trim="searchKey" @confirm="searchSubmit" />
								<!-- @input="inputKey" -->
								<icon type="clear" :size='13' color='#bcbcbc' @tap="cleanKey" v-show="searchKey"></icon>
							</view>
						</view>
						<view v-show="currentTab==0" class="order__lists">
							<block v-for="(item,index) in orderLists" :key="index">
								<view class="section__item" @tap="orderDetail(item)">
									<view class="section__head">
										<view class="left">
											<image class="order_shopicon" src="/static/images/public/order_shopicon.png" mode="aspectFill"></image>
											<text class="title">{{item.seller_name}}</text>
											<text class="cell-more yticon icon-you"></text>
										</view>
										<!-- 0未支付1支付成功2支付失败 -->
										<view class="right">{{item.paid == 1 ? '已完成' : '待支付'}}</view>
									</view>
									<view class="section__con">
										<view class="detail">
											<image class="detail_logo" :src="item.logo" mode="aspectFill"></image>
											<view class="txt-detail">
												<view class="">消费时间： {{item.pay_time}}</view>
												<view class="">消费金额： {{item.total_price}}</view>
												<view v-if="item.shop_commission_retrun_mode == 1" class="">获得贝壳： {{item.gain_conch}}</view>
												<view v-if="item.shop_commission_retrun_mode == 2" class="">获得积分： {{item.gian_integral}}</view>
											</view>
										</view>
										<view class="rate-ing" v-if="1==2">
											<text class="rate-title">评分</text>
											<rate-ing class="rate" active="white" normal="white" bgSeleColor="#E65431" bgNoSeleColor="#EEEEEE"
											 :isIndexRate="true" :size="15" :current="3" disabled></rate-ing>
										</view>
										<view class="bot-btn">
											<view class="btn detail_btn" @tap.stop="orderDetail(item)">订单详情</view>
											<view class="btn already_btn" v-if="item.is_reply == 0" @tap.stop="appraise(item,index)">待评价</view>
											<view class="btn already_btn" v-else>已评价</view>
											<view class="btn againBuy_btn" @tap.stop="payArgin(item.mer_id,)">再次消费</view>
										</view>
									</view>
								</view>
							</block>
							<uni-load-more class="loadMore" iconType="circle" :status="loadStatus" :contentText="contentText"></uni-load-more>
						</view>
					</scroll-view>
				</view>
				<!-- 评价弹层 -->
				<uni-popup ref="popup" type="center">
					<view class="appraiseBox">
						<image @tap="close" class="close" src="../../static/images/center/close.png" mode=""></image>
						<view class="top">
							<image class="appraise_logo" :src="appraiseItem.logo" mode=""></image>
							<text class="title clamp">
								{{appraiseItem.seller_name}}
							</text>
						</view>
						<view class="center">
							<rate-ing class="rate" active="#e41f19" normal="#ccc" :size="50" :hollow="true" :current="appraiseItemCurrent"
							 @change="appraiseChange"></rate-ing>
						</view>
						<view :class="appraiseItemCurrent !== 0?'appraiseAct':''" class="subAppraise" @tap="appraiseItemCurrent !== 0&&appraiseSub()">
							提交评价
						</view>
					</view>
				</uni-popup>
			</view>
		</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	import utils from '@/utils/util.js'
	import {
		orderPayorder,
		orderReply
	} from "@/api/order.js"
	import rateIng from '@/components/uni-rate/uni-rate.vue'
	import uuiTab from '@/components/uni-tabs/uni-tabs.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import empty from "@/components/empty/empty";
	export default {
		components: {
			rateIng,
			uuiTab,
			uniLoadMore,
			uniPopup,
			empty
		},
		data() {
			return {
				// #ifdef MP-WEIXIN
				fixedTop: getApp().globalData.MenuButtonTop + 38,
				// #endif
				appraiseItemIndex: 0,
				appraiseItemCurrent: 0,
				appraiseItem: {},
				act: 3,
				navbar: [{
						name: '线下订单'
					},
					{
						name: '商城订单'
					},
				],
				currentTab: 0,
				searchKey: "",
				page: 1,
				limit: 5,
				orderLists: [],
				loadStatus: "loading",
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多了"
				},
			}
		},
		created() {
			this.getList();
		},
		onHide() {
			this.searchKey = "";
			this.orderLists = [];
			this.page = 1;
		},
		methods: {
			// 评价
			appraise(item, index) {
				this.appraiseItemIndex = index
				this.appraiseItem = item
				this.$refs.popup.open()
			},
			appraiseChange(e) {
				this.appraiseItemCurrent = e.index
			},
			appraiseSub() {
				uni.showLoading({
					mask:true
				})
				orderReply({
					oid: this.appraiseItem.id,
					service_score: this.appraiseItemCurrent
				}).then(res => {
					this.orderLists[this.appraiseItemIndex].is_reply = 1
					this.$refs.popup.close()
					uni.hideLoading()
					uni.showToast({
						title: res.msg
					})
				})
			},
			close() {
				this.$refs.popup.close()
			},
			// 翻页
			lower() {
				if (this.loadStatus == 'noMore') return;
				this.loadStatus = "loading";
				this.getList();
			},
			getList() {
				orderPayorder({
					page: this.page,
					limit: this.limit,
					search: this.searchKey

				}).then(res => {
					let list = res.data.list.map((val, key) => {
						if (val.pay_time) {
							val.pay_time = utils.formatDate(new Date(val.pay_time * 1000));
							return val;
						} else {
							val.pay_time = ""
							return val;
						}
					})

					this.loadStatus = "more";
					this.orderLists.push.apply(this.orderLists, list);
					if (list.length < this.limit) this.loadStatus = "noMore"; //判断所有数据是否加载完成；
					this.page = this.page + 1;
					if (this.orderLists.length == 0) {
						this.contentText.contentnomore = ''
					} else {
						this.contentText.contentnomore = '没有更多了'
					}
				})
			},
			payArgin(id) {
				uni.navigateTo({
					url: '/pages/pay/pay?id=' + id
				})
			},
			orderDetail(item) {
				// navTo('/pages/order/orderDetail')
				uni.navigateTo({
					url: `/pages/order/orderDetail?item=${ encodeURIComponent(JSON.stringify(item)) }`
				})
			},
			searchSubmit() {
				this.page = 1;
				this.orderLists = [];
				this.getList();
			},
			cleanKey() {

				this.page = 1;
				this.searchKey = "";
				this.orderLists = [];
				this.getList();
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			tabChange(e) {
				this.currentTab = e.index;
			}

		},
		onHide() {
			this.$refs.popup.close()
		}
	}
</script>
<style lang="scss" scoped>
	.container {
		position: fixed;
		width: 100%;
		// #ifdef APP-PLUS
		top: calc(var(--status-bar-height) + 44px);
		// #endif
		// #ifdef H5
		top: 0;
		// #endif
		left: 0;
		bottom: 50px;
		bottom: calc(50px + env(safe-area-inset-bottom));
		background-color: #fff;

		.conditions {
			box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, 0.1);
			z-index: 888;

			.condit__tab {}
		}

		.listBox {
			position: absolute;
			top: 0;
			bottom: 0;
			z-index: 1;
			overflow: hidden;
			width: 100%;

			.scroll-Y {
				height: 100%;
			}
		}

		.uni-searchbox {
			box-sizing: border-box;
			display: flex;
			align-items: center;
			width: 91%;
			padding-top: 40rpx;
			margin: 0 auto;

			.uni-search-input {
				width: 100%;
				height: 66rpx;
				border-radius: 35rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				background: #eeeeee;
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
			}

			.uni-input {
				flex: 1;
				color: #333;
				padding: 0 16rpx;
				font-size: 28rpx;
			}

			.uni-input-plholder {
				font-size: 28rpx;
				color: #b2b2b2;
			}
		}

		.order__lists {
			width: 91%;
			margin: 30rpx auto;
			// padding: 20px;
			font-size: 14px;
			line-height: 24px;
		}

		.mall__order {
			text-align: center;
			font-size: 28rpx;
			padding: 20rpx;
			color: #777777;
		}

		.section__item {
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, 0.1);
			border-radius: 10px;
			padding: 30rpx;
			margin-bottom: 30rpx;

			.section__head {
				padding-bottom: 10rpx;
				border-bottom: 1px solid #EEEEEE;
				display: flex;
				justify-content: space-between;

				.left {
					font-size: 26rpx;

					.order_shopicon {
						vertical-align: middle;
						width: 60rpx;
						height: 60rpx;
						margin-right: 10rpx;
					}

					.title {
						color: #333333;
						font-weight: bold;
						font-size: 24rpx;
					}

					.cell-more {
						font-size: 24rpx;
						font-weight: bold;
					}
				}

				.right {
					font-size: 20rpx;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
				}
			}

			.section__con {
				.detail {
					padding-top: 15rpx;
					display: flex;
					// justify-content: space-between;
					height: 120rpx;
					line-height: 40rpx;

					.detail_logo {
						width: 120rpx;
						height: 120rpx;
						float: left;
						margin: 0 40rpx 0 0;
					}

					.txt-detail {
						font-size: 20rpx;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
						float: left;
						font-size: 24rpx;
					}
				}

				.rate-ing {
					margin: 30rpx 0;
					font-size: 26rpx;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
					height: 30rpx;
					line-height: 30rpx;
					overflow: hidden;

					.rate-title {
						padding-right: 5rpx;
					}
				}

				.bot-btn {
					margin-top: 20rpx;
					display: flex;
					justify-content: space-between;

					.btn {
						padding: 5rpx 26rpx;
						border-radius: 15rpx;
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
					}

					.detail_btn {
						color: rgba(102, 102, 102, 1);
						border: 1px solid rgba(102, 102, 102, 1);
					}

					.already_btn {
						color: rgba(51, 51, 51, 1);
						border: 1px solid #000000;
					}

					.againBuy_btn {
						color: #58BF6B;
						border: 1px solid #58BF6B;
					}

				}
			}
		}

		.appraiseBox {
			width: 550rpx;
			background-color: #fff;
			border-radius: 8rpx;
			padding: 30rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			position: relative;

			.close {
				position: absolute;
				right: 20rpx;
				top: 20rpx;
				width: 24rpx;
				height: 24rpx;
			}

			.top {
				display: flex;
				align-items: center;

				.appraise_logo {
					width: 80rpx;
					height: 80rpx;
					border-radius: 40rpx;
				}

				.title {
					width: 390rpx;
					margin-left: 20rpx;
					font-size: 30rpx;
					color: #333;
				}
			}

			.center {
				margin: 50rpx 0;
			}

			.subAppraise {
				background-color: #ddd;
				color: #fff;
				height: 80rpx;
				width: 200rpx;
				border-radius: 10rpx;
				line-height: 80rpx;
				text-align: center;
				margin: 0 auto;
			}

			.appraiseAct {
				background-color: $theme-color;

			}
		}
	}
</style>
